<template>
  <div>
    <h1>Welcome</h1>
    <router-link to="/" tag="div">回首页</router-link>
    <p></p>
    <el-button plain @click="goLogin">去登录</el-button>
  </div>
</template>

<script>
import storage from '../utils/storage';

const {
  getItem, setItem, clearItem, clearAll,
} = storage;

export default {
  name: 'Welcome',
  mounted() {
    this.login();
    this.getAge();
  },
  methods: {
    goLogin() {
      this.$router.push('/login');
    },
    login() {
      this.$request(
        {
          url: '/login',
          data: { username: 'aaa', password: 'bbb' },
        },
      ).then((res) => {
        console.log(res);
      });
      this.$request.get('/login',
        { username: 'aaa', password: 'bbb' },
        { mock: true, loading: true })
        .then((res) => {
          console.log(res);
        });
    },
    testStorage() {
      clearAll();
      const a = getItem('username');
      console.log('🚀 ~ file: Welcome.vue ~ line 43 ~ testStorage ~ a', a);
      setItem('username', 'Jack');
      setItem('age', 30);
      const b = getItem('username');
      console.log('🚀 ~ file: Welcome.vue ~ line 47 ~ testStorage ~ b', b);
      clearItem('username');
      const c = getItem('username');
      console.log('🚀 ~ file: Welcome.vue ~ line 50 ~ testStorage ~ c', c);
    },
    getAge() {
      this.$storage.setItem('userinfo', { name: 'Lily', age: 15 });
      console.log('userinfo', this.$storage.getItem('userinfo'));
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
